import { useState } from 'react'
import logo from './logo.svg'
import './App.css'
import {GlobalStyle,Section,Header,Content,Footer}from './style' //style.js
// import IconFont from '../Components/IconFont';
// 路径写自己的
// 使用组件  type也是从图标库复制过来的


function App() {
  

  return (
    <div className="App">
      <GlobalStyle></GlobalStyle>
      <Section>
        <Header>
            <h3>一碗周</h3>
            <h4>2月前</h4>
            <p>X</p>
        </Header>
        <Content>
          <h1>在项目中用ts封装axios，一次封装整个团队受益</h1>
          <div>
            <p>这篇文章封装的axios已经满足如下功能：无处不在的代码提示；灵活的拦截器；可以创建多个实例，灵活根据项目进行调整；每个实例，或者说每个接口...</p>
            <img src="./images/1.jpg" alt="" />
          </div>
        </Content>
        <Footer>
          {/* <IconFont type = "icon-good" /> */}
          <div>
            <p>点赞 1057</p>
            <p>评论 212</p>
          </div>
          <div>
            <span>axios</span>
            <span>TypeScript</span>
          </div>
        </Footer>
      </Section>
      <Section>
        <Header>
            <h3>Ali2333</h3>
            <h4>2月前</h4>
            <p>X</p>
        </Header>
        <Content>
          <h1>关于电竞职业选手转前端开发这件事</h1>
          <div>
            <p>在2021年之前我是一位王者荣耀职业选手，现是一名前端开发工程师，至于我为什么要这样选择呢，且听我慢慢道来~</p>            
            <img src="./images/2.jpg" alt="" />
          </div>
        </Content>
        <Footer>
          {/* <IconFont type = "icon-good" /> */}
          <div>
            <p>点赞 659</p>
            <p>评论 492</p>
          </div>
          <div>
            <span>前端</span>
          </div>
        </Footer>
      </Section>
    </div>
  )
}

export default App
